<!-- 运费模板添加&修改 -->
<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      @close="close"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="110px"
        :rules="rules"
      >
        <!--  模板类型 -->
        <el-form-item
          label="模板类型"
          prop="templateType"
        >
          <el-select
            v-model="form.templateType"
            class="select__width"
            placeholder="请选择模板类型"
            label-width="100%"
          >
            <el-option
              v-for="item in listData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 运送类型 -->
        <el-form-item
          label="运送类型"
          prop="transportType"
        >
          <el-select
            v-model="form.transportType"
            placeholder="请选择运送类型"
            class="select__width"
          >
            <el-option
              v-for="item in list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 管连城市 -->
        <el-form-item

          label="关联城市"
          prop="associatedCityList"
        >
          <span v-if="form.templateType!==3">全国</span>
          <el-checkbox-group
            v-if="form.templateType===3"
            v-model="form.associatedCityList"
          >
            <el-checkbox
              label="2"
              type="checkbox"
            > 京津冀  &nbsp; </el-checkbox>
            <el-checkbox
              label="3"
              type="checkbox"
            > 江浙沪  &nbsp; </el-checkbox>
            <el-checkbox
              label="4"
              type="checkbox"
            > 川渝  &nbsp;</el-checkbox>
            <el-checkbox
              label="5"
              type="checkbox"
            > 黑吉辽  &nbsp; </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <!-- 首重价格 -->
        <el-form-item
          label="首重价格"
          prop="firstWeight"
        >
          <el-input
            v-model.number="form.firstWeight"
            placeholder="请输入首重价格"
            type="text"
          ><span
            slot="append"
            class="money"
          >元</span></el-input>
        </el-form-item>

        <!-- 续重价格 -->
        <el-form-item
          label="续重价格"
          prop="continuousWeight"
        >
          <el-input
            v-model.number="form.continuousWeight"
            type="text"
            placeholder="请输入续重价格"
          ><span
            slot="append"
            class="money"
          >元</span></el-input>
        </el-form-item>

        <!-- 轻抛系数 -->
        <el-form-item
          label="轻抛系数"
          prop="lightThrowingCoefficient"
        >
          <el-input
            v-model.number="form.lightThrowingCoefficient"
            placeholder="请输入轻抛系数"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row
          type="flex"
          justify="center"
        >
          <el-button
            type="primary"
            class="btn"
            @click="submit"
          >确 定</el-button>
          <el-button
            class="btn1"
          >取 消</el-button>
        </el-row>
      </template>

    </el-dialog>
  </div>
</template>
<script>
import { freightManageOperate, freightManageList } from '@/api/transit'
export default {
  name: 'FreightAdd',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        associatedCityList: [],
        computeWeight: '',
        continuousWeight: '',
        created: '',
        expense: '',
        firstWeight: '',
        id: '',
        lightThrowingCoefficient: '',
        templateType: '',
        transportType: '',
        updated: ''
      },
      rules: {
        firstWeight: [
          { required: true, message: '模板类型不能为空', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        templateType: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        transportType: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        associatedCityList: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      listData: [
        { value: 1, label: '同城寄' },
        { value: 2, label: '省内寄' },
        { value: 3, label: '经济区互寄' },
        { value: 4, label: '跨省' }
      ],
      list: [
        { value: 1, label: '普快' },
        { value: 2, label: '特快' }
      ]
    }
  },
  watch: {
    id: {
      async handler(newVal) {
        const res = await freightManageList()
        console.log(res)
        this.form = res.data.find(item => item.id === newVal)
      }
    }
  },
  methods: {
    async submit() {
      if (this.id) {
        await freightManageOperate(this.form)
        this.$message.success('修改成功!')
        this.close()
        this.$emit('father-app')
      } else {
        const res = await freightManageOperate(this.form)
        console.log(res)
        console.log(111)
        this.close()
        this.$emit('father-app')
        this.$message.success(res.msg)
        this.form = {
          associatedCityList: ['全国'],
          computeWeight: '',
          continuousWeight: '',
          created: '',
          expense: '',
          firstWeight: '',
          id: '',
          lightThrowingCoefficient: '',
          templateType: '',
          transportType: '',
          updated: ''
        }
      }
    },
    close() {
      this.$emit('dialog-visible', false)
    }

  }
}
</script>
